【ワークアラウンド】React アプリケーションに Amazon Interactive Video Service ( IVS ) Player を組み込む
※こちらで紹介するやり方はワークアラウンド（本来のやり方ではない）です。本来意図する組み込みかたは、React や Vue のビルドプロセスでうまくいかなくなることがわかっています。React や Vue へ組み込む方法については、詳細が分かり次第再チャレンジします。詳細はこちらをご覧ください。
アプリケーション開発者にとって嬉しいサービス
先日、Amazon Interactive Video Service（以下、IVS）が発表されました。個人的にはメディア系で一番うれしいサービスです。
IVSは、ビデオストリーミングを短いステップ数で開始できるサービスです。開発側（運用側）がやることは以下のような作業で済みます。
- IVS のストリームを用意する（AWSコンソールで作業）
- 作成したストリームを配信者に伝える
- Amazon IVS SDK を使って、Webやモバイルアプリにプレイヤーを組み込む
以上です。これは、事業開発の観点でみると、以下のユースケースで有効です。
- Twitch や OPENREC のような配信サービスを提供したい
- アイレット様がやっているような、オリジナルの勉強会のストリーミング環境を構築したい
- HELLO! PROJECT の 「ハロプロ研修生発表会」のような、ワンショットのイベントをストリーミング配信したい
- 視聴者による投票機能など、そのイベント専用のアプリケーションも提供したい
いずれのユースケースも、 配信者の手間は最小限に、視聴者にリッチな体験を届けたい というモチベーションだとわかります。これを踏まえて、Web版で、React に組み込めれば、アプリケーションとして開発しやすいなと考え、最小限の構成でまずは組み込んでみるところからはじめました。
現状、インストールした Amazon IVS SDK は素直には使えない
早速こちらのサンプルを見ながら、Reactアプリケーションに組み込むチャレンジをしました。
…が、駄目！どう頑張っても、再生のときに WebAssembly 関連のエラーになってしまいます。 create-react-app で作ったこともあり、yarn eject して webpack.config.js に wasm ファイルもバンドルするよう設定を追加したりも試したのですが、結局 ivs sdk をインストールして使う方法はうまくいきませんでした。
Vue でも同様のようなので、もう少し情報が集まるまで待ちます。今回は、issueのコメントにもある、<script>タグをappendしてIVSプレイヤーを組み組むワークアラウンドを紹介します。
暫定的な回避方法
create-react-app した後、AmazonIVSWorkaround.js というコンポーネントを作ります。以下のように書きます。
import React, {useEffect, useRef} from 'react';
function AmazonIVSWorkaround(options) {
const divEl = useRef(null);
const videoEl = useRef(null);
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://player.live-video.net/1.0.0/amazon-ivs-player.min.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
// eslint-disable-next-line no-undef
if (IVSPlayer.isPlayerSupported) {
// eslint-disable-next-line no-undef
const player = IVSPlayer.create();
player.attachHTMLVideoElement(document.getElementById('video-player'));
player.load("https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8");
player.play();
}
}
return () => {
document.body.removeChild(script);
}
},
[]
)
return (
<div ref={divEl}>
<video
id="video-player"
ref={videoEl}
playsInline
autoPlay
height={300}
controls
/>
</div>
);
}
export default AmazonIVSWorkaround;
こちらのガイド で紹介されているのと同じやり方です。スクリプトを読み込んだ後、グローバルスコープに追加された IVSPlayer を使ってストリームを再生しています。ちなみにこちらで再生しているストリームはあらかじめAWSが用意してくれているデモストリームのようです。常に流れているので、テストで有用です。
App.js に組み込み、yarn start すると以下意図どおり再生できます。
yarn add amazon-ivs-player で追加したプレイヤーを組み込む方法がわかったら、再度チャンレンジします。
サンプルリポジトリ
以下の手順で試せます。
git clone git@github.com:cm-wada-yusuke/amazon-ivs-react-js-sample.gitcd amazon-ivs-react-js-sampleyarn installyarn start
